<!--
 * @Author: your name
 * @Date: 2021-08-06 09:49:28
 * @LastEditTime: 2021-08-10 14:05:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\components\popular.vue
-->
<template>
    <div class="popular">
      <p class="title"><b>微博热门话题</b></p>
      <div class="content1" v-for="a in articleData.list"
                :key="a.id">
          <div class="img1">
              <img :src="a.cover" alt="">
              <!-- <img src="../image/popular1.png" alt=""> -->
          </div>
          <div class="text1">
              <div class="title1">{{ a.title }}</div>
              <div class="read1">
                  <span>{{ a.authorId }}万阅读</span>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{ a.readTimes }}万讨论</span>
              </div>
          </div>
      </div>
      <div class="footer">查看更多></div>
    </div>

</template>
<style lang="scss" scoped>
.popular{
    background-color: #f2f2f5;
    width: 354px;
    height: 480px;
}
.title{
    font-size: 20px;
    padding-top: 22px;
    padding-left: 20px;
}
.content1{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 15px;
    .img1{
         flex-basis: 100px;
         padding-left: 20px;
         padding-right: 15px;
    }
    .img1 img{
        width: 100%;
        height: 100%;
    }
    .text1{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
         flex: 1;
         .title1{
            padding-top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 200px;
         }
         .read1{
            padding-top: 10px;
            color: #9f9fa0;
         }

    }
   
}
 .footer{
       padding-top: 10px;
       padding-left: 145px;
    }
</style>
<script>
import { get } from "../../utils/request";
export default {
  data() {
    return {
      loading: false,
      category: {},
      param: {
        page: 1,
        pageSize: 5,
      },
      articleData: {
        list: [],
      },
    };
  },
  watch: {
    "$route.query": {
      handler(query) {
        this.category = query;
        this.loadArticles();
      },
      deep: true,
    },
  },
  created() {
    // 获取参数
    this.category = this.$route.query;
    this.loadArticles();
  },   
  methods: {
    toArticleHandler(id) {
      this.$router.push({ path: "/article", query: { id } });
    },
    pageChangeHandler(page) {
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles() {
      this.loading = true;
      let url = "/index/article/pageQuery";
      this.param.categoryId = this.category.id;
      get(url, this.param)
        .then((resp) => {
          this.articleData = resp.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>